<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" width="1000px" append-to-body custom-class="import-dialog">
      <div class="app-container">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="管理员人脸" name="admin">
            <el-row class="mb20">
              <el-col :span="1.5">
                <el-button size="small" @click="addAdminFace">新增</el-button>
              </el-col>
            </el-row>
            <el-table v-loading="loading" :data="list">
              <el-table-column label="姓名" prop="userName"/>
              <el-table-column label="照片" prop="img">
                <template slot-scope="scope">
                  <el-image
                    style="width: 50px; height: 50px"
                    :src="scope.row.img"
                    fit="cover" :preview-src-list="[scope.row.img]"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column label="状态" prop="">
                <template slot-scope="scope">
                  <span>{{ faceStateMap[scope.row.faceState] ? faceStateMap[scope.row.faceState] : '' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                  <el-button size="mini" type="danger" @click="deleteFace(scope.row,1)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getAdminFaceList"
            />
          </el-tab-pane>
          <el-tab-pane label="租客人脸" name="lessee">
            <el-table v-loading="loading" :data="list">
              <el-table-column label="姓名" prop="userName"/>
              <el-table-column label="认证照片" prop="img">
                <template slot-scope="scope">
                  <el-image
                    style="width: 50px; height: 50px"
                    :src="scope.row.img"
                    fit="cover" :preview-src-list="[scope.row.img]"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                  <el-button size="mini" type="danger" @click="deleteFace(scope.row,2)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getLesseeFaceList"
            />
          </el-tab-pane>
          <el-tab-pane label="数字密码" name="password">
            <el-row class="mb20">
              <el-col :span="1.5">
                <el-button size="small" @click="addPassword">新增</el-button>
              </el-col>
            </el-row>
            <el-table v-loading="loading" :data="list">
              <el-table-column label="类型" prop="type">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.pwd_type" :value="scope.row.pwdType"/>
                </template>
              </el-table-column>
              <el-table-column label="密码" prop="password"/>
              <el-table-column label="来源" prop="source">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.pwd_source" :value="scope.row.pwdSource"/>
                </template>
              </el-table-column>
              <el-table-column label="有效期至" prop="validTime">
                <template slot-scope="scope">
                  <span>{{ scope.row.authEndTime | formatDate('YYYY-MM-DD HH:mm') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="创建时间" prop="createTime">
                <template slot-scope="scope">
                  <span>{{ scope.row.createTime | formatDate('YYYY-MM-DD HH:mm') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                  <el-button size="mini" type="danger" @click="deletePassword(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getPasswordList"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
    <!-- 新增管理员人脸弹窗 -->
    <AddAdminFace v-model="dialogAddAdminFaceVisible" :title="addTitle" :data="data" @success="getAdminFaceList"/>
    <!-- 重新授权租客人脸弹窗 -->
<!--    <AuthLesseeFace v-model="dialogAuthLesseeFaceVisible" :title="addTitle" :data="form" @success="getLesseeFaceList"/>-->
    <!-- 新增密码弹窗 -->
    <AddPassword v-model="dialogAddPasswordVisible" :title="addTitle" :data="data" @success="getPasswordList"/>
  </div>
</template>

<script>
import { debounce } from '@/utils'

import AddAdminFace from './add-admin-face.vue'
import AddPassword from '@/views/smartLock/lockManage/components/open-auth/add-password.vue'
import AuthLesseeFace from '@/views/smartLock/lockManage/components/open-auth/auth-lessee-face.vue'
import { listLockFace, listLockPwd, removeLockFace, removeLockPwd } from '@/api/smartLock/lockManage'

export default {
  dicts: ['pwd_type', 'pwd_source'],
  components: {
    AddAdminFace,
    AuthLesseeFace,
    AddPassword
  },
  props: {
    title: {
      default: '开门权限'
    },
    value: {
      default: false
    },
    data: {
      default: undefined
    }
  },
  data() {
    return {
      activeName: 'admin',
      //是否显示选择房间弹窗
      dialogSelectRoomVisible: false,
      //是否显示添加管理员人脸弹窗
      dialogAddAdminFaceVisible: false,
      //是否显示重新授权租客人脸弹窗
      dialogAuthLesseeFaceVisible: false,
      //是否显示添加密码弹窗
      dialogAddPasswordVisible: false,
      // 弹窗标题
      addTitle: '新增管理员人脸信息',
      // 表单数据
      //表单
      form: {},
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      //列表
      list: [],
      // 字典
      faceStateMap: {
        '1': '启用',
        '2': '禁用'
      }
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.init()
        }
      },
      immediate: true
    }
  },
  methods: {
    init() {
      this.reset()
      this.getAdminFaceList()
    },
    reset() {
      this.activeName = 'admin'
      this.queryParams = {
        pageNum: 1,
        pageSize: 10
      }
      this.list = []
      this.total = 0
      this.resetForm('form')
    },
    // 处理点击事件
    handleClick(tab) {
      this.reset()
      this.activeName = tab.name
      this.activeName === 'admin' && this.getAdminFaceList()
      this.activeName === 'lessee' && this.getLesseeFaceList()
      this.activeName === 'password' && this.getPasswordList()
    },
    // 新增管理员人脸
    addAdminFace() {
      this.addTitle = '新增管理员人脸信息'
      this.dialogAddAdminFaceVisible = true
    },
    // 删除人脸
    deleteFace(row,type) {
      this.$confirm('确认删除人脸授权？', '提示', {}).then(() => {
        this.loading = true
        removeLockFace(row.faceId).then((res) => {
          this.loading = false
          this.$message.success(res.msg || '删除成功')
          if (type === 1){
            this.getAdminFaceList()
          }else if (type === 2){
            this.getLesseeFaceList()
          }
        })
      }).catch(() => {
        this.$message.error(res.msg || '删除失败')
        this.loading = false
        if (type === 1){
          this.getAdminFaceList()
        }else if (type === 2){
          this.getLesseeFaceList()
        }
      })
    },
    // 获取管理员人脸列表
    getAdminFaceList() {
      this.loading = true
      let params = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        lockId: this.data.lockId,
        userType: '1'
      }
      listLockFace(params).then(res => {
        this.list = res.rows
        this.total = res.total
        this.loading = false
        this.loading = false
      }).catch(() => {
        this.loading = false
        this.total = 0
        this.list = []
      })
    },
    // 获取租客人脸列表
    getLesseeFaceList() {
      this.loading = true
      let params = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        lockId: this.data.lockId,
        userType: '2'
      }
      listLockFace(params).then(res => {
        this.list = res.rows
        this.total = res.total
        this.loading = false
        this.loading = false
      }).catch(() => {
        this.loading = false
        this.total = 0
        this.list = []
      })
      // this.list = [{ name: '密码', img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' }]
      // this.total = 1
      // this.loading = false
    },
    // 新增密码
    addPassword() {
      this.addTitle = '新增时效密码'
      this.dialogAddPasswordVisible = true
    },
    // 获取密码列表
    getPasswordList() {
      this.loading = true
      let params = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        lockId: this.data.lockId
      }
      listLockPwd(params).then(res => {
        this.list = res.rows
        this.total = res.total
        this.loading = false
      }).catch(() => {
        this.loading = false
        this.total = 0
        this.list = []
      })
    },
    // 删除密码
    deletePassword(row) {
      this.$confirm('确认删除密码？', '提示', {}).then(() => {
        this.loading = true
        removeLockPwd(row.pwdId).then((res) => {
          this.loading = false
          this.$message.success(res.msg || '删除成功')
          this.getPasswordList()
        })
      }).catch(() => {
        this.loading = false
      })
    },
    // reAuthFace(row) {
    //   this.form = { ...row }
    //   this.dialogAuthLesseeFaceVisible = true
    //   this.addTitle = '重新授权租客人脸'
    // },w
    cancel() {
      this.reset()
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/dialog";
</style>
